<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="800px" height="800px" style="border: 1px solid #ccc"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext('2d');
	var butterfly = new Image();
	butterfly.src = "butterfly.png"
	butterfly.onload = drawButterFlies;
	function drawButterFlies() {
		context.drawImage(butterfly,0,0,200,138);
		context.drawImage(butterfly,200,0,200,138);
		context.drawImage(butterfly,400,0,200,138);
		setTimeout(moveButterFlies,1000);
	}

	function moveButterFlies() {
		context.clearRect(0,0,canvas.width,canvas.height)
		context.drawImage(butterfly,0,0,200,138);
		context.drawImage(butterfly,200,200,200,138);
		context.drawImage(butterfly,400,0,200,138);
	}
</script>